<template>
  <div id="app">
    <Topbar :key="topbarkey" />

    <Header />
    <Login v-if="isShowLoginModal"> </Login>
    <!-- 提示框 -->
    <transition name="sb">
      <Toast v-show="isShow"></Toast>
    </transition>
    <router-view />
    <Footer />
    <button @click="fn">点击请求</button>
  </div>
</template>
<script>
import Footer from "./components/Footer";
import Topbar from "./components/Topbar";
import Header from "./components/Header";
import Login from "./components/Login";
import Toast from "./components/Toast";
import { JingPingAPI } from "./request/API.js";
import { mapState } from "vuex";
export default {
  components: {
    Footer,
    Header,
    Topbar,
    Login,
    Toast,
  },
  data(){
    return{
      topbarkey:0
    }
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showmodal.isShowLoginModal,
      isShow: (state) => state.showToast.isShow,
    }),
  },
  created() {
    // JingPingAPI().then((res)=>{
    //   console.log("res",res);
    //   // console.log(res.data.data.data.records);
    // })
  },
  methods: {
    // fn(){
    //    JingPingAPI().then((res)=>{
    //   console.log("app-res",res);
    //  ;
    // })
    // }
    async fn() {
      //await 后面可以是一个promise对象
      //await 需要在async 修饰得函数内使用
      let res1 = await JingPingAPI();
      console.log("app-res1", res1);
      let res2 = await JingPingAPI();
      console.log("app-res2", res2);
    },
  },
  watch:{
    "$route.path":{
      handler(){
        //让topbar实现组件重载
        this.topbarkey++; //修改了key值 从而让组件重新加载
      }
    }
  }
};
</script>
<style lang="less">
//进入过渡开始，过渡结束
.sb-enter,.sb-leave-to{
  opacity: 0;
}
//过程中
.sb-enter-active,.sb-leave-active{
  transition: opacity 0.5s linear ;
}
//进入过渡结束，离开过渡开始
.sb-enter-to,.sb-leave{
  opacity: 1;
}
</style>
